<template>
    <div class="custom__content">
        <el-timeline>
            <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                <el-card>
                    <h4>{{ activity.title }} | {{ activity.timestamp }}</h4>
                    <ul class="custom__content-list">
                        <li v-for="(item, index) in activity.content" :key="index" v-html="item"></li>
                    </ul>
                    <!-- <p style="margin-left: 20px;">
                    <div </div>
                    </p> -->
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script setup lang="ts">
    import { reactive } from 'vue'
    function Stress(text: string) {
        return `<span style="color:red">${text}</span>`
    }


    const activities = reactive([
        {
            title: 'talbe 表格增加单选功能',
            timestamp: '2025年2月28日',
            content: [
                `talbe 属性  ${Stress('singleProp')} 默认值 和  公开方法${Stress('clearRadio')} 用于控制单选功能`,
            ],
        },
        {
            title: 'talbe 表格增加单选功能',
            timestamp: '2025年2月28日',
            content: [
                `talbe 属性  ${Stress('single')} 和  ${Stress('singleProps')} 用于控制单选功能`,
            ],
        },
        {
            title: '修复 talbe 的自定义渲染问题',
            timestamp: '2025年2月27日',
            content: [
                `talbe 的列属性 ${Stress('render')} 渲染失败修复`,
            ],
        },
        {
            title: '修复 pane-item 默认滚动问题',
            timestamp: '2025年2月26日',
            content: [
                `pane-item 默认情况下不附加滚动条，只有在 ${Stress('fill')} 的时候才会拥有滚条`,
            ],
        },
        {
            title: '对弹出框的更变',
            timestamp: '2025年2月25日',
            content: [
                `Dialog 的  ${Stress('footbar')} 插槽改成  ${Stress('footer')}`,
            ],
        },
    ])
</script>

<style lang="scss" scoped>
    .custom__content {
        padding: 20px;

        ul.custom__content-list {
            margin-left: 20px;

            li {
                list-style-type: square;
                color: #0099ff;
                font-size: 16px;
                line-height: 30px;
            }
        }

    }
</style>